<template>
  <div class="warp-content">
    <div class="about-page">
      <el-avatar
        src="https://pic1.zhimg.com/80/v2-ceaf5dcc1debb0c79b210f9b804c7f91_720w.jpg?source=1940ef5c"
      ></el-avatar>
      <h1 class="title">DJ</h1>
      <p class="info">前端开发</p>
      <p class="text-line">
        前端采用 vue、elementui、axios、scss、字体图标 iconfont
        <a
          target="_blank"
          class="iconfont icon-link"
          href="https://gitee.com/djdidi/blog-vue"
          >开源地址</a
        >
      </p>
      <p class="text-line">
        后端基于 node 环境，使用 eggjs、mysql、sequelize、swagger、jwt
        <a
          target="_blank"
          class="iconfont icon-link"
          href="https://gitee.com/djdidi/blog-backend"
          >开源地址</a
        >
      </p>
      <p class="text-line">
        开发基于vscode，使用 eslint + prettier 作语法规则和代码风格的检查
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.warp-content {
  background-color: #fff;
  margin-top: 100px;
  padding: 100px;
  // box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
  //   0 17px 50px 0 rgba(0, 0, 0, 0.19);
  border: 2px solid #eee;
  border-radius: 20px;
  position: relative;
  color: #3c4858;
}

.el-avatar {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translate(-50%);
}

.title {
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
  font-weight: 700;
}

.info {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 50px;
  font-weight: 700;
}

.text-line {
  margin-top: 24px;

  a {
    color: #0366d6;
    &:hover {
      color: #30aade;
      text-decoration: underline;
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 576px) {
  .el-avatar {
    width: 100px;
    height: 100px;
    top: -50px;
  }

  .warp-content {
    padding: 50px 20px;
    margin-top: 70px;

    box-shadow: none;
    border: 1px solid #eee;
  }

  .title {
    font-size: 22px;
  }
  .text-line {
    line-height: 24px;
    font-size: 14px;
    a {
      font-size: 14px;
    }
  }

  p.info {
    margin-bottom: 20px;
    font-size: 14px;
  }
}
</style>
